<template>
  <div>
    <el-row class="feature-row">
      <el-col :span="6" class="feature-card" @click="goToRoute('PremiumCourse')">
        <img src="@/assets/images/course/teacher/img.png" alt="精品课遴选" class="feature-img" />
      </el-col>
      <el-col :span="6" class="feature-card" @click="goToRoute('ExperimentalTeaching')">
        <img src="@/assets/images/course/teacher/img_1.png" alt="实验教学" class="feature-img" />
      </el-col>
      <el-col :span="6" class="feature-card" @click="goToRoute('BasicAssignment')">
        <img src="@/assets/images/course/teacher/img_2.png" alt="基础性作业" class="feature-img" />
      </el-col>
      <el-col :span="6" class="feature-card" @click="goToRoute('ExerciseBank')">
        <img src="@/assets/images/course/teacher/img_3.png" alt="习题库" class="feature-img" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TeacherPreparation',
  methods: {
    goToRoute(routeName) {
      this.$router.push({ name: routeName });
    }
  }
};
</script>


<style scoped>
.menu-row {
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
}

.menu-button {
  color: #999;
  font-size: 16px;
}

.menu-button.active {
  color: #1890ff;
  font-weight: bold;
}

.feature-row {
  display: flex;
  justify-content: space-between;
}

.feature-card {
  background-color: #ffffff;
  text-align: center;
  cursor: pointer; /* 添加鼠标指针样式 */
}

.feature-img {
  width: 308px;
  height: 90px;
}
</style>
